<template>
  <!-- 部门管理 -->
  <div class="dept-manage">
    <div class="search-container">
      <el-form ref="ruleFormRef" :model="queryParams" label-width="80" inline>
        <el-form-item label="关键字" prop="deptName">
          <el-input v-model="queryParams.deptName" maxlength="60" placeholder="部门名称" clearable
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部" style="width: 100px;" clearable>
            <el-option v-for="(value, key, index) in STATUS_TYPE" :value="key" :label="value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="handleResetQuery">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" icon="Plus" @click="handleOpenDeptDialog('rootAdd')">
          新增
        </el-button>
      </template>
      <el-table v-loading="loading" :data="tableData" row-key="deptId" default-expand-all highlight-current-row border>
        <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.prop" :label="item.label"
          min-width="120" :width="item.width || ''" :fixed="item.fixed || false" show-overflow-tooltip
          :resizable="false">
          <template #default="{ row }">
            <span v-if="['status'].includes(item.prop)">
              <el-tag :type="[1].includes(row[item.prop]) ? 'primary' : 'warning'">{{ STATUS_TYPE[row[item.prop]]
                }}</el-tag>
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button type="primary" icon="Plus" link @click="handleOpenDeptDialog('add', scope.row)">
              新增
            </el-button>
            <el-button type="primary" icon="Edit" link @click="handleOpenDeptDialog('edit', scope.row)">
              编辑
            </el-button>
            <el-button type="danger" icon="Delete" link @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <EditDialog :deptParams="deptParams" @close="handleCloseDeptDialog"></EditDialog>
  </div>
</template>

<script setup>
defineOptions({ name: 'DeptManage' })
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import EditDialog from './EditDialog.vue'
import { getDeptTree, deleteDept } from '@views/deptManage/api/deptManage'
import { STATUS_TYPE } from '@constants/dictionary'

const loading = ref(false)
const queryParams = reactive({ deptName: '', status: '' })
const columnData = ref([
  {
    label: '部门名称',
    prop: 'deptName',
    fixed: 'left'
  },
  {
    label: '状态',
    prop: 'status',
    width: 100
  },
  // {
  //   label: '排序',
  //   prop: 'sort'
  // },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180
  }
])
const tableData = ref([])
const ruleFormRef = ref(null)
const deptParams = reactive({ visible: false })

// 获取数据
const handleQuery = async () => {
  loading.value = true
  const res = await getDeptTree(queryParams)
  loading.value = false
  if (res?.code === 200) {
    tableData.value = res.data || []
  }
}

// 重置表单
const handleResetQuery = () => {
  ruleFormRef.value.resetFields()
  handleQuery()
}

// 打开新增/编辑弹窗
const handleOpenDeptDialog = (type, row) => {
  deptParams.type = type
  deptParams.row = row
  deptParams.deptOptions = [{ deptName: '顶级部门', deptId: 0, children: tableData }]
  deptParams.visible = true
}

// 关闭新增/编辑弹窗
const handleCloseDeptDialog = (type) => {
  console.log('关闭')
  deptParams.visible = false
  if (type) handleQuery()
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除的数据项', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      let res = await deleteDept({ ids: row.deptId })
      if (res?.code === 200) {
        ElMessage.success('删除成功')
        handleQuery()
      }
    })
    .catch(() => { })
}

// 初始化
onMounted(() => {
  handleQuery()
})

</script>

<style scoped lang="scss"></style>
